<template>
  <div>
    <div>
      <el-form
        ref="visitsForm"
        :model="visitsForm"
        label-width="80px"
        :rules="rules"
        class="visit-form"
        :inline="true"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="visitsForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="visitsForm.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="visitsForm.address"></el-input>
        </el-form-item>

        <el-form-item label="证据文件" prop="file">
          <el-input v-model="visitsForm.file" v-if="false"></el-input>
          <el-upload
            class="upload-demo"
            action="http://127.0.0.1:8082/file/upload"
            ref="uploadFile"
            :auto-upload="false"
            :data="visitsForm"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :http-request="uploadFile"
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="visitsForm.file"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              上传信访文件，且不超过10M
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('visitsForm')"
            >提交</el-button
          >
          <el-button type="success" @click="resetForm('visitsForm')"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item label="案件描述" prop="casfile">
          <el-input
            :rows="8"
            style="width: 730px"
            type="textarea"
            v-model="visitsForm.casfile"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Menu from "../components/Menu";
export default {
  name: "Visit",
  components: { Menu },
  data() {
    return {
      visitsForm: {
        name: "",
        phone: "",
        address: "",
        casfile: "",
        file: ""
      },
      formDate: "",
      src: "/static/images/top1.jpeg",
      drawer: false,
      code: "",
      rules: {
        name: [
          { required: true, message: "请输入名字", trigger: "blur" },
          { min: 2, max: 10, message: "名字最少两个字", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度必须为11位", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          { min: 6, max: 100, message: "地址至少具体到市", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.formDate = new FormData();
      this.$refs.uploadFile.submit();
      this.formDate.append("name", this.visitsForm.name);
      this.formDate.append("phone", this.visitsForm.phone);
      this.formDate.append("address", this.visitsForm.address);
      this.formDate.append("casfile", this.visitsForm.casfile);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.$axios
        .post("/file/upload", this.formDate, config)
        .then(res => {
          console.log(res);
          this.getcode();
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 2000,
              onClose: () => {
                this.open();
              }
            });
            this.$refs.uploadFile.clearFiles();
            this.$refs.visitsForm.resetFields();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(res => {
          console.log(res);
        });
    },
    uploadFile(file) {
      this.formDate.append("file", file.file);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push(key);
    },
    open() {
      this.$alert("这是用于查询进度的查询码: " + this.code, "提交成功", {
        confirmButtonText: "确定",
        callback: action => {}
      });
    },
    getcode() {
      this.$axios
        .get("/verify/code", {
          params: {
            phone: this.visitsForm.phone
          }
        })
        .then(res => {
          this.code = res.data.data.data;
        });
    },

    handleChange(file, fileList) {
      this.visitsForm.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.visitsForm.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>

<style>
.visit-form{
  margin-top: 36px;
}
.header {
  float: left;
  width: 1410px;
  height: 28px;
  line-height: 28px;
  z-index: 101;
  padding: 0px;
  background: #0a2556;
  margin-bottom: 1px;
}
.m20 {
  margin-left: 20px;
}
.aaa {
  height: 300px;
  width: 1410px;
}
.aaaa {
  text-align: center;
}
.el-f {
  width: 35%;
}
.el-t {
  width: 778px;
}
</style>
